<template>
  <div>
    <el-form :model="form" label-width="200px">
      <el-form-item label="主题色">
        <ColorPicker
          v-model:pureColor="form.topicColor"
          format="hex"
        ></ColorPicker>
      </el-form-item>
      <el-form-item label="品牌LOGO">
        <ImageUploader v-model:img-url="form.brandLogo"></ImageUploader>
      </el-form-item>
      <el-form-item label="版权声明类型">
        <el-radio-group v-model="form.copyrightType">
          <el-radio :label="1">文字</el-radio>
          <el-radio :label="2">图片</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="版权声明" v-show="form.copyrightType === 1">
        <el-input v-model="form.copyrightDesc"></el-input>
      </el-form-item>
      <el-form-item label="版权图片" v-show="form.copyrightType === 2">
        <ImageUploader v-model:img-url="form.copyrightImg"></ImageUploader>
      </el-form-item>
      <el-form-item label="默认创建相册数量">
        <el-input-number v-model="form.defaultAlbumAmount"></el-input-number>
      </el-form-item>
      <el-form-item label="相册初始容量大小">
        <el-input-number v-model="form.defaultAlbumSize"></el-input-number>
      </el-form-item>
      <el-form-item label="顶部封面图">
        <ImageUploader v-model:img-url="form.topCoverImage"></ImageUploader>
      </el-form-item>
      <el-form-item label="小程序分享标题">
        <el-input v-model="form.shareTitle"></el-input>
      </el-form-item>
      <el-form-item label="小程序分享图">
        <ImageUploader v-model:img-url="form.shareImg"></ImageUploader>
      </el-form-item>
    </el-form>
    <el-button class="ml-[200px]" type="primary" @click="submit"
      >提交</el-button
    >
    <el-dialog v-model="dialogVisible">
      <img w-full :src="dialogImageUrl" alt="Preview Image" />
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { Delete, Download, Plus, ZoomIn } from "@element-plus/icons-vue";
import { setConfig, getConfig } from "@/apis/config";
import { login } from "@/apis/user";
import { setToken } from "@/utils/store";
import { ElMessage, type UploadFile } from "element-plus";
import ImageUploader from "@/components/ImageUploader.vue";

const form = reactive({
  // 品牌logo
  brandLogo: "",
  // 版权声明文字
  copyrightDesc: "",
  // 版权声明图片
  copyrightImg: "",
  // 版权声明类型1文字2图片
  copyrightType: 0,
  // 默认创建相册数量
  defaultAlbumAmount: 0,
  // 相册初始容量大小(G)
  defaultAlbumSize: 0,
  // 点击跳转url
  redirectTo: "",
  // 小程序分享图
  shareImg: "",
  // 小程序分享标题
  shareTitle: "",
  // 顶部封面图
  topCoverImage: "",
  // 主题颜色
  topicColor: "",
});

const dialogImageUrl = ref("");
const dialogVisible = ref(false);
const disabled = ref(false);

const handleRemove = (file: UploadFile) => {
  console.log(file);
};

const handlePictureCardPreview = (file: UploadFile) => {
  dialogImageUrl.value = file.url!;
  dialogVisible.value = true;
};

const handleDownload = (file: UploadFile) => {
  console.log(file);
};

const submit = async () => {
  await setConfig(form);
  ElMessage.success("保存成功");
};
const getDetail = async () => {
  const res = await getConfig();
  Object.assign(form, res)
};
onMounted(() => {
  getDetail();
});
</script>

<style scoped>
.el-input {
  --el-input-width: 220px;
}
</style>
